<template>
    <div class="header-container">
        <div class="header-left">
            <icon-svg class="shrink" name="shrink" @click="shrinkMenu()"></icon-svg>
            <el-breadcrumb class="ml-20" :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>新增/编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header-right">
            <div class="user-info">{{ nickName }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { computed } from 'vue';
import useApp from '@admin/_find/store/app';

const appStore = useApp()
const shrinkMenu = () => {
    appStore.menuCollapse = !appStore.menuCollapse
}

const nickName = computed(() => appStore.userInfo.nickName)
</script>
<style lang="scss" scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    .header-left {
        display: flex;
        align-items: center;

        .shrink {
            font-size: 20px;
            cursor: pointer;
        }
    }

    .header-right {
        .user-info {
            font-size: 16px;
        }
    }
}
</style>